<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级竞赛</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./image/星星.png" type="image/x-icon">
</head>

<body>
    <!-- 头部 -->
    <header>
        <h1 style="  margin-top: 0;">班级竞赛</h1>
        <p>班级名称：软件web班</p>
    </header>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#interoduction">竞赛介绍 </a></li>
            <li><a href="#participants">参赛选手</a></li>
            <li><a href="rules">竞赛规则</a></li>
            <li><a href="results">成绩展示</a></li>
        </ul>
    </nav>
    <!-- 主体内容 -->
    <main>
        <!-- 竞赛介绍 -->
        <section id="interoduction">
            <h2>竞赛介绍</h2>
            <p>为提升同学们的网页设计与制作能力，激发创新思维，特举办本次网页制作班级竞赛。本次竞赛面向全体班级同学，旨在通过实践，让大家深入掌握网页制作技术，同时锻炼团队协作能力与审美水平。
                竞赛内容丰富多样，同学们可以围绕校园生活、文化艺术、科技创新等主题，自由发挥创意，设计并制作出兼具美观性与实用性的网页。</p>
            <p>在制作过程中，鼓励运用 HTML、CSS等专业技术，展现独特的页面布局、绚丽的动画效果和流畅的交互体验。
                奖项设置丰厚，将评选出一、二、三等奖。无论你是网页制作新手，还是经验丰富的小能手，都能在这场竞赛中展示自我，收获成长与荣誉。期待同学们踊跃参与，用代码与创意点亮数字世界！</p>
        </section>
        <!-- 参赛选手 -->
        <section id="participants">
            <h2>参赛选手</h2>
            <div class="participant-list">
                <div class="participant">
                    <img src="./image/微信图片_20250508084508.jpg" alt="选手1照片"
                        style="text-shadow: 2px 2px 4px black;">
                    <div>
                        <p>姓名：小明</p>
                        <p>简介：和班级伙伴组队学习 HTML，主攻页面布局，在小组协作中快速掌握基础框架搭建。</p>
                    </div>
                </div>
                <div class="participant">
                    <img src="./image/微信图片_20250508084601.jpg" alt="选手2照片">
                    <div>
                        <p>姓名：小李</p>
                        <p>简介：受班级学习热潮影响，从零基础开始钻研，擅长用CSS 美化图文排版，为小组作品增色。</p>
                    </div>
                </div>
            </div>
            <div class="participant-list">
                <div class="participant">
                    <img src="./image/微信图片_20250508084608.jpg" alt="选手3照片">
                    <div>
                        <p>姓名：小王</p>
                        <p>简介：与同班同学互相督促练习，熟练掌握链接跳转与表单制作，期待和大家在赛场共同成长。学习成绩优异，擅长团队协作。</p>
                    </div>
                </div>
                <div class="participant">
                    <img src="./image/微信图片_20250508084620.jpg" alt="选手4照片">
                    <div>
                        <p>姓名：小爱</p>
                        <p>简介：思维敏捷，有较强的创新能力。在班级前端兴趣小组中进步显著，负责设计交互细节，希望和同窗一起交出亮眼答卷。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 竞赛规则 -->
        <section id="rules">
            <h2>竞赛规则</h2>
            1. 代码规范性 <p>
                考生的HTML和CSS代码必须遵循上述规则。
                每违反一条规则，扣1分。</p>
            2. 页面功能完整性 <p>
                页面应包含所有必要的功能模块（如头部、导航栏、主体内容、底部等）。
                缺少任何一个模块，扣10分。</p>
            3. 样式正确性 <p>
                页面的样式应符合设计要求，布局合理，颜色搭配协调。
                样式错误或不符合设计要求，每处扣2分。</p>
            4. 代码可读性 <p>
                代码应具有良好的可读性，包括适当的缩进、换行和注释。
                代码可读性差，扣5分。</p>
            5. 创新性 <p>
                鼓励考生在满足要求的基础上进行创新设计。
                创新设计加分，最高加20分。</p>
            </p>
        </section>
        <!-- 成绩展示 -->
        <section id="results">
            <h2>成绩展示</h2>
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>初赛成绩</th>
                        <th>决赛成绩</th>
                        <th>总成绩</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>85</td>
                        <td>90</td>
                        <td>87.5</td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>90</td>
                        <td>88</td>
                        <td>89</td>
                    </tr>
                    <tr>
                        <td>王五</td>
                        <td>80</td>
                        <td>90</td>
                        <td>87</td>
                    </tr>
                    <tr>
                        <td>赵六</td>
                        <td>90</td>
                        <td>85</td>
                        <td>89</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <!-- 底部 -->
    <div class="footer-a">
        <footer>
            <p>班级口号：团结一心，奋勇向前！</p>
            <p>制作人信息：孙婧 联系方式：15631322539</p>
        </footer>
    </div>
    <div style="width: 100%; height: 170px;"></div>
</body>

</html>